<script setup lang="ts">
import useDialog from '@/hooks/useDialog';

const videoUrl = ref('');
const { title, visible, openDialog, closeDialog } = useDialog({ title: '报警视频' });
defineExpose({
  open: openDialog,
  close: closeDialog,
  url: videoUrl
});
</script>

<template>
  <el-dialog
    :title="title"
    v-model="visible"
    :draggable="true"
    width="50%"
    class="largeScreen-dialog"
    :before-close="closeDialog"
    append-to-body
    :modal="false"
  >
    <div class="video-container">
      <video width="100%" height="auto" controls autoplay loop muted>
        <source :src="videoUrl" type="video/mp4" />
        您的浏览器不支持 Video 标签。
      </video>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
